<!--项目详情-->
<template>
	<view>

		<view v-if="loading" class="flex flex-row flex-row-center-center px-50 py-24">
			<tm-icon spin name="tmicon-shuaxin"></tm-icon>
		</view>

		<block v-if="HomeData">
			<view class="mx-24 my-33">
				<view class="text-size-lg text-weight-b">{{ HomeData.title }}</view>
				<view class="pt-20 text-size-n c_qianhui">
					<text v-if="HomeData?.created_at">时间：{{ formatTimeBystr(HomeData.created_at) }}</text>
					<!-- <text class="ml-50">查看：{{ HomeData.created_at }}</text>
					<text class="ml-50">来源：36Kr</text> -->
				</view>
				<view style="height: 36rpx;"></view>
				<!--基本信息-->
				<view class="white round-4 px-24 py-30">
					<view class="text-size-g text-weight-b flex flex-row ">
						<text class="pr-16">基本信息</text>
						<tm-image :round="0" :width="133" :height="54" :src="getStatsImg(HomeData.auth_state,HomeData.auth_type)"></tm-image>
					</view>
					<view v-for="(item, index) in HomeData.basic_data"
						class="pt-22 flex flex-row flex-row-center-between text-size-m">
						<view class="c_wenhui">{{ item.key }}</view>
						<view :style="{ color: item?.color || '#333' }">{{ item.value }}</view>
					</view>
				</view>
				<view style="height: 21rpx;"></view>
				<!--交易信息-->
				<view class="white round-4 px-24 py-30">
					<view class="text-size-g text-weight-b">交易信息</view>
					<view v-for="(item, index) in HomeData.trans_data"
						class="pt-22 flex flex-row flex-row-center-between text-size-m">
						<view class="c_wenhui">{{ item.key }}</view>
						<view :style="{ color: item?.color || '#333' }">{{ item.value }}</view>
					</view>

				</view>
				<view style="height: 37rpx;"></view>
				<!--项目介绍-->
				<view class="text-size-g text-weight-b">项目介绍</view>
				<view class="text-size-n pt-18 c_danhui">
					<tm-html :content="HomeData.intro"></tm-html>
				</view>
				<view style="height: 37rpx;"></view>
				<!--项目咨询-->
				<view class="text-size-g text-weight-b mb-32">项目咨询</view>
				<block v-for="(item, index) in list" :key="index">
					<view class=" c_bt my-24 pb-24">
						<view class="flex flex-row flex-row-center-start">
							<view class="c_kd rounded">
								<view class="flex flex-center text-size-m text-white" style="width:62rpx;height:62rpx;border-radius: 50%;background:#e44279">{{ item.realname[0] }}</view>
							</view>
							<view class="ml-17">
								<view class="text-size-m text-weight-b">{{ item.realname }}</view>
							</view>
							<view class="ml-18 ">
								<tm-image :round="0" :width="89" :height="36" :src="getStatsImg(item.auth_state,item.auth_type)"></tm-image>
							</view>
						</view>
						<view class="c_ml pt-20">
							
							<view class="text-size-n c_danhei">
								{{ item.content }}
							</view>
							
							<view class="pt-40 flex flex-row flex-row-center-start">
								<view @click="showAlert=true;showReplay=true;replayId = item.id" class="c_hfbg text-blue text-size-s mr-19">回复</view>
								<view class="text-size-s c_wenhui">{{ formatTime(item.created_at) }}</view>
							</view>
						</view>
						<block v-for="(item2, index2) in item.reply" :key="index2">
							<view class="c_ml mt-25 flex flex-row flex-row-center-start">
								<view class="c_kd rounded">
									<view class="flex flex-center text-size-m text-white" style="width:62rpx;height:62rpx;border-radius: 50%;background:#42e4a1">{{ item2.realname[0] }}</view>
								</view>
								<view class="ml-17">
									<view class="text-size-m text-weight-b">{{ item2.realname }}</view>
								</view>
								<view class="ml-18 ">
									<tm-image :round="0" :width="89" :height="36" :src="getStatsImg(item2.auth_state,item2.auth_type)"></tm-image>
								</view>
							</view>
							<view class="c_ml pt-20">
								<view class="c_ml">
									<view class="text-size-n c_danhei">
										{{ item2.content }}
									</view>
									<view class="pt-40 flex flex-row flex-row-center-start">
										<view class="text-size-s c_wenhui">{{ formatTime(item2.created_at) }}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</block>


			</view>
			<!--发贴咨询-->
			<view class="fbt white px-32 py-26 flex flex-row flex-row-center-between">
				<view>
					<tm-button @click="showAlert=true;showReplay=false;replayId = ''" :width="583" :round="3" label="发贴咨询"></tm-button>
				</view>
				<view @click="collectDetail">
					<view>
						<tm-icon  v-if="!HomeData.is_collect" color="#767676" :line-height="0" :font-size="50" name="tmicon-collection"></tm-icon>
						<tm-icon v-else color="primary" :line-height="0" :font-size="50" name="tmicon-collection-fill"></tm-icon>
					</view>
					<view class="text-size-m c_wenhui">收藏</view>
				</view>
			</view>

			<bl-list-layout v-if="!error" title="没有咨询数据" btn-color="white" @restart-load="resetReq(true); getChatList()"
				:status="status" :list-len="list.length">
			</bl-list-layout>
		</block>
		<bl-list-layout @restartLoad="geData" :error="error"></bl-list-layout>


		<tm-drawer @close="showReplay = false;replayId='';contentReplay=''" v-model:show="showAlert" placement="bottom" title="评论内容" closeable="false" :height="890">
			<template v-slot:title>
				<text class="texti-size-g text-weight-b ml-24">{{ showReplay?'回复':'咨询' }}</text>
			</template>
			<view class="mx-24 mt-29">
				<view>
					<tm-input 
					v-model="contentReplay"
					placeholder="请遵循规章制度，不可发表任何违法言论。最多255个字符，最少1个字符" type="textarea" :inputPadding="[22]"
						:height="287" showCharNumber>
					</tm-input>
				</view>
				<view class="mt-38 flex flex-row flex-row-center-start duiq">
					<tm-checkbox v-model="is_show" :default-checked="is_show" :size="32" :round="1" label=""></tm-checkbox>
					<text class="text-size-m c_danhui ml-15">仅对回复人公开展示评论</text>
				</view>
				<view style="height:98rpx;"></view>
				<tm-button @click="submitReplay" block :round="3" :label="showReplay?'回复':'咨询'"></tm-button>
				<view style="height:122rpx;"></view>
			</view>

		</tm-drawer>




		<view style="height:140rpx;"></view>


	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"
import { imgHost } from "@/libs/imgHost";
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";
import { formatTime,formatTimeBystr } from "@/libs/util";
const { status, resetReq, actionHttp, list, setOptions, category, banner } = useReqList();


const HomeData = ref<any>(null)
const loading = ref(true)
const error = ref(false)
const id = ref("")
const apiname = ref("")
const showAlert = ref(false)
const showReplay = ref(false)
const replayId=ref("")
const is_show = ref(false)
const contentReplay = ref("")
const chatApiName = ref("")

const getStatsImg = computed(()=>{
	return (status:boolean,type:number)=>{
		if(type==1) return status?imgHost("c_a1.png"):imgHost("c_a0.png");
		if(type==2) return status?imgHost("c_e1.png"):imgHost("c_e0.png");
		if(type==3) return status?imgHost("c_d1.png"):imgHost("c_d0.png");
		if(type==4) return status?imgHost("c_c1.png"):imgHost("c_c0.png");
		if(type==5) return status?imgHost("c_b1.png"):imgHost("c_b0.png");
		return imgHost("c_w.png");
	}
})

onLoad(async (obj: any) => {
	if (obj?.id) {
		id.value = obj?.id;
	}
	if (obj?.api) {
		apiname.value = obj?.api;
	}
	if (obj?.keytype) {
		chatApiName.value = obj?.keytype
	}
	geData();

})
onPullDownRefresh(() => {
	if (loading.value || status.isLoading) {
		uni.stopPullDownRefresh()
		return;
	}
	geData();
})

onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getChatList()
})


async function geData() {
	error.value = false;
	loading.value = true;
	// @ts-ignore
	let data = await apiUr[apiname.value](id.value).catch((er => {
		error.value = true;
	})).finally(() => {
		uni.stopPullDownRefresh()
		loading.value = false;
	})
	let d = data?.data ?? null;
	if (!d) return;
	HomeData.value = data?.data ?? null;

	resetReq(true);
	getChatList()

}

async function submitReplay(){
	uni.showLoading({title:"稍候...",mask:true});
	await apiUr.contentAddComment({
		detail_id:id.value,
		type:chatApiName.value,
		parent_id:replayId.value,
		content:contentReplay.value,
		is_show:is_show.value
	});
	replayId.value = ""
	contentReplay.value = ""
	showAlert.value = false;
	resetReq(true);
	geData();
}


async function collectDetail(){
	uni.showLoading({title:"收藏中",mask:true});
	await apiUr.collectDetail(id.value,chatApiName.value);
	resetReq(true);
	geData();
}


function getChatList() {
	uni.showLoading({ title: "...", mask: true })
	// @ts-ignore
	actionHttp(apiUr.detailCommentList(), { type: chatApiName.value, id: id.value }).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
	})
}


</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style lang="less" scoped>
.fbt {
	position: fixed;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	width: 100%;
}

.c_bt {
	border-bottom: 1px solid #D8D8D8;
}

.c_kd {
	width: 62rpx;
	height: 62rpx;
	background: #D8D8D8;
	overflow: hidden;
}

.c_rzimg {
	width: 133rpx;
	height: 54rpx;
}

.c_ml {
	margin-left: 68rpx;
}

.c_hfbg {
	background: #ffffff;
	text-align: center;
	border-radius: 16rpx;
	padding: 11rpx 22rpx;
}

.duiq {
	align-items: center;
	align-content: center;
}
</style>